<!--
 * @Descripttion: 左侧栏 基础组件
 * @Author: linzisong
 * @Date: 2021-06-29 10:20:35
 * @LastEditors: linzisong
 * @LastEditTime: 2021-07-08 09:47:56
-->
<template>
  <div>
    <draggable
      tag="ul"
      :value="list"
      v-bind="{
        group: { name: 'form-draggable', pull: 'clone', put: false },
        sort: false,
        animation: 180,
      }"
      @start="handleStart($event, list)"
    >
      <li
        v-for="(val, index) in list"
        :key="index"
      >
        <i :class="val.icon"></i>
        {{ val.label }}
      </li>
    </draggable>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import draggable from "vuedraggable";
import { lsitType, customEventType } from '@/components/FormDesign/config/interfaceConfig';

@Component({
  components: {
    draggable,
  },
})
export default class BaseItems extends Vue {
  @Prop({type: [], required: true}) public list!: lsitType[];

  created ():void {
    // console.log(this.list);
    // this.list = []
  }
  handleStart(e: customEventType , list: lsitType[]):void {
    // console.log(e.oldIndex, list)
    // console.log(e)
    // this.$emit("start", list[e.oldIndex].type);~
  }


}
</script>

<style scoped>
</style>